<template>
  <div id="full" style="z-index: 100;overflow: auto;"
       class="fixed top-0 left-0 w-full h-full c2cBackground1 tradeSuccessDetail">
    <div  :class="orderDetail.state == 3 ? 'green' :'greyBg'">
      <order-nav :back="back" :class="orderDetail.state == 3 ? 'green' :'greyBg'" @back="$router.replace('/wantBuy')">
        <template #left>
          <van-icon name="arrow-left" :color="orderDetail.state == 3 ?'#fff':'#000'"/>
        </template>
        <template #right>
          <div class="flex items-center chat flex justify-center" @click="$router.push({
            path: '/chat'
          })">
            <van-badge class="w-35 h-33 mr-22" :content="0">
              <img class="w-full h-full" v-if="orderDetail.state == 3" src="~@/assets/image/c2c/Vector-white.png" alt="" />
              <img class="w-full h-full" v-else src="~@/assets/image/c2c/Vector-black.png" alt="" />
            </van-badge>
            <span class="font-28" :class="orderDetail.state == 3 ?'text-white':'c2cColor'">
              <span>{{ orderDetail.direction == 'buy' ? $t('联系卖家') : $t('联系买家')}}</span>
            </span>
          </div>
        </template>
      </order-nav>
      <div class="flex justify-between items-center mt-20 px-32 pb-50 text-white">
        <div>
          <div class="font-52" :class="orderDetail.state != 3 ?'c2cColor':''">{{ fixStr()}}</div>
          <div class="mt-26 font-26" v-if="orderDetail.state==3">
            {{$t('您已成功')}}&nbsp;{{ orderDetail.direction == 'buy' ? $t('购买') : $t('出售')}}&nbsp;{{ orderDetail.symbol.toLowerCase() == 'usdt' ? Math.floor(orderDetail.amountUsdt * 100) / 100 : Math.floor(orderDetail.amountUsdt * 10000) / 10000 }}&nbsp;{{ orderDetail.symbol.toUpperCase() }}
          </div>
          <div class="mt-26 font-26 c2cColor" v-else>{{fixText()}}</div>
        </div>
        <div>
          <img v-if="orderDetail.state ==3" class="w-92 h-92" src="~@/assets/image/c2c/Group181.png" alt="">
          <img v-else class="w-92 h-92" src="~@/assets/image/c2c/Group1212.png" alt="">
        </div>
      </div>
    </div>
    <div class="pt-46 pb-30 c2cTabBackground">
      <order-data
          :detail="orderDetail"
      >
        <div class="w-full h-16 mb-40 diviLine"></div>
      </order-data>
    </div>
    <div class="px-32 mt-16 mainBackground py-39">
      <h2 class="font-400 font-30 c2cColor">{{ $t('交易方式') }}</h2>
      <div class="flex items-center mt-28">
        <div class="w-6 h-28 border-ra" style="background: #E7BB41;"></div>
        <span class="ml-9 font-22 text-grey">{{ orderDetail.methodName }}</span>
      </div>
    </div>
<!--    <van-divider/>-->
<!--    <evaluation class="pb-60 bg-white">-->
<!--      <template #desc>-->
<!--        <slot name="desc"></slot>-->
<!--      </template>-->
<!--    </evaluation>-->
    <div class="mt-16">
      <div class="flex justify-between items-center h-100 px-32 mt-16 c2cTabBackground c2cColor" @click="tokefu">
        <div>
          <span class="font-30 c2cColor">{{ $t('联系客服') }}</span>
        </div>
        <div>
          <van-icon name="arrow" class="font-700" />
        </div>
      </div>
      <div class="flex justify-between items-center h-100 px-32 mt-16 c2cTabBackground c2cColor" @click="$router.push('/Appeal')">
        <div>
          <span class="font-30 c2cColor">{{ $t('对订单存在疑问') }}</span>
        </div>
        <div>
          <van-icon name="arrow" class="font-700"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  mapState
} from "vuex";
import {
  Badge,
  Divider,
  Cell,
  CellGroup,
  Icon,
} from "vant";
import OrderNav from "@/components/order-nav/OrderNav";
import OrderData from "@/page/c2cOrder/components/order-data/OrderData";
import Evaluation from "@/page/c2cOrder/payment/components/Evaluation";
import otcApi from "@/API/otc";
export default {
  name: "TradeSuccessDetail",
  props: ['title','back'],
  data() {
    return {
      checked: false,
      orderDetail: {},
    }
  },
  components: {
    [Badge.name]: Badge,
    [Divider.name]: Divider,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    OrderNav,
    OrderData,
    Evaluation,
  },
  async created(){
    console.log(this.orderInfo)
    const order_no = this.$store.state.c2c.order_no
    const res = await otcApi.ctcOrderGetDetail({ order_no, language: this.$i18n.locale });
    this.orderDetail = res.data;
  },
  methods:{
    fixStr(){
      let str = ''
      if (this.orderDetail.state == 1) {
        str = ''
      } else if (this.orderDetail.state == 2) {
        str = this.$t('申诉中')
      } else if (this.orderDetail.state == 3) {
        str = this.$t('已完成')
      } else if (this.orderDetail.state == 4) {
        str = this.$t('已取消')
      } else if (this.orderDetail.state == 5) {
        str = this.$t('已超时')
      }
      return str
    },
    fixText(){
      let str = ''
      if (this.orderDetail.state == 2){
        str = this.$t('您的订单正在申诉处理中')
      } else if (this.orderDetail.state == 4){
        str = this.$t('您已取消订单')
      } else if (this.orderDetail.state == 5) {
        str = this.$t('您的订单已超时')
      }
      return str
    },
    tokefu() {
      this.$router.push('/customerService')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/init.scss";
.tradeSuccessDetail{
  ::v-deep .van-nav-bar__right{
    padding: 0;
  }
  ::v-deep .van-nav-bar__arrow {
    color: #fff;
  }
  ::v-deep .greyBg .van-nav-bar {
    background: $grey_bg;
  }
    ::v-deep .green .van-nav-bar {
      background: #2ebd85;
    }
  ::v-deep .van-cell {
    padding: 0 32px !important;
    background: $c2c_tab_background;
    &:last-child {
        margin-bottom: 0;
      }
  }
  ::v-deep .van-cell-group {
    background: $c2c_tab_background;
  }
  ::v-deep .van-cell__title {
    color: $text_color1
  }
     ::v-deep .van-cell__value {
      color: $text_color;
    }
}

.switch {
  transform: scale(.7) translateX(20px);
}

.chat {
  width: 232px;
  height: 64px;
  border-radius: 36px 0px 0px 36px;
}
.green{
  background: #2ebd85;
}
</style>
